<template>
  <transition 
  appear 
  name="animate__animated animate__bounce"
  enter-active-class="animate__backInDown"
    leave-active-class="animate__backOutUp"
  >
  <div>
    <!--注册页面 开始-->
    <el-row :gutter="12" type="flex" justify="center">
      <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4">
        <el-card shadow="hover">
          <h1 class="text-center">注册页面</h1>
          <el-form
            :label-position="labelPosition"
            label-width="80px"
            :model="formLogin"
            :rules="rules"
            @submit.native.prevent
          >
            <el-form-item label="用户名" prop="username">
              <el-input v-model="formLogin.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" autocomplete="off" v-model="formLogin.password"
                @keyup.enter.native="login"></el-input>
            </el-form-item>

            <nav class="text-center" @keyup.enter="login">
              <el-button @click="register" type="primary">注册</el-button>
              <el-button @click="toLogin" type="primary">去登录</el-button>
            </nav>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <!--登录页面 结束-->
  </div>
  </transition>
</template>

<script>
import { message } from '@/element-ui/message'
export default {
  name: "Register",
  mounted(){

  },
  data() {
    return {
      labelPosition: 'right',
      formLogin: {
        username: '',
        password: '',
        remember: false,
      },
      rules: {
          username: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入用户密码', trigger: 'blur' }
          ]
      }
    }
  },
  computed:{
    loginState(){
      return this.$store.state.user.loginState | false
    }
  },
  methods: {
    register(){
      // 向Vuex的action层发送登录请求
      this.$store.dispatch('user/login', this.formLogin)
    },
    toLogin(){
        this.$router.push('/login')
    }
  }
};
</script>

<style scoped>
  .text-center{
    text-align: center;
  }
</style>